<template>
  <div class="container">
    <div class="back">
      <span @click="goBack">返回</span>
      <el-button
        size="large"
        type="success"
        plain
        round
        class="button"
        :icon="View"
        @click="viewContract"
      >
        预览
      </el-button>
    </div>
    <el-row class="row">
      <el-col :span="6" class="item">
        <div class="title">客户姓名</div>
        <div class="content">{{ routerDetail.belonger }}</div>
      </el-col>
      <el-col :span="6" class="item">
        <div class="title">购买学科</div>
        <div class="content">{{ routerDetail.subject }}</div>
      </el-col>
      <el-col :span="6" class="item">
        <div class="title">购买课程</div>
        <div class="content">{{ routerDetail.courseName }}</div>
      </el-col>
      <el-col :span="6" class="item">
        <div class="title">购买金额</div>
        <div class="content">{{ routerDetail.price }}</div>
      </el-col>
    </el-row>
    <el-row class="row">
      <el-col :span="6" class="item">
        <div class="title">是否折扣</div>
        <div class="content">{{ routerDetail.activityId }}</div>
      </el-col>
      <el-col :span="6" class="item">
        <div class="title">创建时间</div>
        <div class="content">{{ routerDetail.createTime }}</div>
      </el-col>
      <el-col :span="6" class="item">
        <div class="title">折扣类型</div>
        <div class="content">{{ routerDetail.activityType }}</div>
      </el-col>
    </el-row>
  </div>

  <el-dialog
    title="文件预览"
    style="width: 50%"
    v-model="isViewPdf"
    width="80%"
    :before-close="handleClose"
  >
    <iframe ref="pdfFrame" :src="routerDetail.fileUrl" style="width: 100%; height: 100%"></iframe>
  </el-dialog>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router'
import { getContractdetails } from '@/api/contract.js'
import { onMounted, ref } from 'vue'
import { View } from '@element-plus/icons-vue'
const route = useRoute()
// console.log(route.params.id)
const routerDetail = ref([])
const isViewPdf = ref(false)
// 返回上一级
const router = useRouter()
function goBack() {
  router.go(-1)
}
// 获取详情
const Contractdetails = async () => {
  const { data } = await getContractdetails(route.params.id)
  routerDetail.value = data
}
onMounted(() => {
  Contractdetails()
})
// 查看合同

const viewContract = () => {
  isViewPdf.value = true
}

const handleClose = () => {
  isViewPdf.value = false
}
</script>

<style scoped>
.container {
  margin: 10px;
  background-color: #fff;
}
.back {
  cursor: pointer;
  height: 70px;
  line-height: 70px;
  padding-left: 30px;
  border-bottom: 1px solid #f3f0f0;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.back span {
  flex-grow: 1;
  flex-shrink: 1;
}

.back .button {
  margin-right: 50px;
  background-color: #eaeaea;
  color: #4e4c4c;
  border: 1px solid transparent;
}
.back .button:hover {
  color: #fff; /* 悬停时的字体颜色 */
  background-color: #05cc95; /* 悬停时的背景颜色 */
  border: 1px solid transparent; /* 悬停时的边框样式 */
}
.row {
  padding-left: 100px;
  padding-top: 20px;
}
.button {
  width: 100px;
}
.item {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
}

.item .title {
  font-size: 16px;
  margin-bottom: 10px;
}

.item .content {
  font-size: 16px;
}
</style>
